<template>
  <div class="area" v-if="loading">
    <!-- 页头 -->
    <van-tabs type="card" v-model="id">
    <!-- 遍历 绑定id -->
      <van-tab :title="item.cityname" v-for="(item,index) in cityname" :key='index' :name="item.id">
        <div class="title">
          <img :src="/pic&video/+title.pic" alt="">
          <router-link :to="'/detail?id='+title.id">
            {{title.title}}
            <span class="title_more">[更多]</span>
          </router-link>
        </div>
        <!-- 赛区新闻 -->
        <div class="body">
          <div class="bodyTitle">
            <h1>赛区新闻</h1>
          </div>
          <!-- 显示内容 -->
          <ul>
            <li v-for="(item,index) in body" :key="index" class="body_li">
              <router-link :to="'/detail?id='+item.id" class="body_li">
              <div>
                <p class="title">{{item.title}}</p>
                <p class="info">{{moment(item.time).format('YYYY/MM/DD')}}&nbsp;{{item.writer}}</p>
              </div>
              <img :src="/pic&video/+item.pic" alt="">
              </router-link>
            </li>
          </ul>


          <div class="bodyTitle">
            <h1>赛区图片</h1>
          </div>
          <div class="bodyPic">
            <router-link :to="'/detail?id='+img.id">
              <img :src="/pic&video/+img.pic" alt="">
              <p class="title">{{img.title}}</p>
              <p class="info">{{moment(img.time).format('YYYY/MM/DD')}}</p>
            </router-link>
          </div>



          <div class="bodyTitle">
            <h1>赛区视频</h1>
          </div>


          <div class="bodyImg">
            <router-link :to="'/detail?id='+video[0].id">
            <div class="rowup">
              <img :src="/pic&video/+video[0].pic" alt="">
              <div class="btn"></div>
            </div>
            <p>{{video[0].title}}</p>
            </router-link>
            <div class="rowdown">
              <div>
                <router-link :to="'/detail?id='+video[1].id">
                <div class="rowup">
                  <img :src="/pic&video/+video[1].pic" alt="">
                  <div class="btn"></div>
                </div>
                <p>{{video[1].title}}</p>
                </router-link>
              </div>
              <div>
                <router-link :to="'/detail?id='+video[2].id">
                <div class="rowup">
                  <img :src="/pic&video/+video[2].pic" alt="">
                  <div class="btn"></div>
                </div>
                <p>{{video[2].title}}</p>
                </router-link>
              </div>
            </div>
          </div>

          <div class="bodyTitle">
            <h1>赛区场馆</h1>
          </div>
        <lbt/>
        <div class="bodyTitle">
          <h1>赛区项目</h1>
        </div>

        <van-row>
          <van-col class="footImg" span="4"><img :src="/pic&video/+eventfirst[0].pic" alt=""></van-col>
          <van-col class="footImg" span="4" offset="1" v-for="(item,index) in eventnext" :key="index"><img :src="/pic&video/+item.pic" alt=""></van-col>
        </van-row>
        <div class="more">查看更多</div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import lbt from '../components/lbt.vue'
import {mapMutations} from 'vuex'
  export default {
  components: { lbt },
    name: 'swiper-example-thumbs-gallery',
    title: 'Thumbs gallery with Two-way control',
    data() {
      return {
        id:1,
        cityname:null,
        title:[],
        body:[],
        img:null,
        video:[],
        eventfirst:[],
        eventnext:[],
        loading:0
      }
    },
    
    mounted () {
      this.getdata()
      this.getcityname()
      this.getstadium()
      this.getevent()
      
    },
    methods: {
      ...mapMutations({updata:'updata'}),
      getevent(){
        let url='areaevent?id='+this.id
        this.axios.get(url).then(res=>{
          console.log('even',res);
          this.eventfirst=res.data.results.slice(0,1)
          this.eventnext=res.data.results.slice(1,5)
          this.loading=1
        })
      },
      getstadium(){
        let url='areastadium?sid='+this.id
        this.axios.get(url).then(res=>{
          console.log('area',res.data.results);
          this.updata(res.data.results)
          
        })
      },
      getcityname(){
        let tab='areacity'
        this.axios.get(tab).then(res=>{
        console.log('cityname',res);
        this.cityname=res.data.results
        })
      },
      getdata() {
        let url='area?cityid='+this.id
        this.axios.get(url).then(res=>{
          console.log('data',res);
          let body=res.data.results
          this.title=body.slice(0,1)[0]
          this.body=body.slice(1,4)
          this.img=body.slice(4,5)[0]
          this.video=body.slice(5,8)
        })
      }
    },
    watch: {
      id(newValue, oldValue) {
        this.getdata()
        this.getstadium()
        this.getevent()
      }
    },

  }
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  /* 页头 */
  .title img{
    width: 100%;
  }
  .title_more{
    color:deepskyblue;
  }
  /* 分页主题 */
  .area h1{
    background-image: url('/area/background.png');
    background-repeat: no-repeat;
    background-position: 0;
    padding-left:1.2rem;
    background-size:20px auto;
    line-height: 42px;
    font-size: 23px;
    margin-top: 15px;
  }
  /* 赛区新闻 */
  .body_li{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  .body_li div{
    width: 60%;
    position: relative;
  }
  .body_li img{
    width: 35%;
  }
  p.info{
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 12px;
  }
  .bodyPic img{
    width: 100%;
  }
  .bodyPic{
    position: relative;
    height: 40vh;
  }
  .rowup{
    position: relative;
  }
  /* 设置视频中间图片 */
  .btn{
    background-image: url(/pic&video/video_back.png);
    position: absolute;
    width: 3rem;
    height: 3rem;
    background-size: 100% 100%;
    top: 50%;
    left: 50%;
    margin-top: -1.5rem;
    margin-left: -1.5rem;
  }
  .rowup img{
    width: 100%;
  }
  .rowdown{
    display: flex;
    justify-content:space-between;
  }
  /* 设置下行视频的间距 */
  .rowdown>div{
    width: 49%;
  }
    /* 设置页头固定格式 */
    .van-tab--active{
      background-color: #7474f2 !important;
    }
    .van-tabs__nav--card{
      margin: 0 !important;
      border: 0 !important;
      padding: 0px 30px;
      border-radius: 90% !important;
    }

  /* 设置页尾图片 */
  .footImg img{
    width: 100%;
  }
  .more{
    text-align: center;
    margin-top:10px;
  }
  /* 设置轮播图下层图片 */
  .gallery-thumbs{
    height: 31% !important;
  }
  /* 设置轮播图的高度 */
  .thumb-example{
    height: 100%;
  }
  /* 设置a标签的样式 */
  .area a{
    color: black;
  }

  /* 设置页头的样式 */
  .van-tabs__nav--card .van-tab{
    color: deepskyblue !important;
    border:0 !important;
    border-radius: 10px 10px;
  }
  .van-tabs__nav--card .van-tab.van-tab--active{
    color: white !important;
  }
</style>